<template>
  <div class="step-box">
    <div v-if="toggleFlag">
      <el-row class="custom-id-title">
        客户证件照片
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" class="center">
          <div class="papers-photo">
            <img src='assets/theme/img/viceoBiz/frontPhoto.png' alt="">
          </div>
        </el-col>
        <el-col :span="12" class="center">
          <div class="papers-photo">
            <img src='assets/theme/img/viceoBiz/reversePhoto.png' alt="">
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="site-identity-title">
        <el-col :span="12">
          客户现场照片
        </el-col>
        <el-col :span="12">
          身份证件照片
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" class="center">
          <div class="peror-photo">
            <img src='assets/theme/img/viceoBiz/perpr.png' alt="">
          </div>
        </el-col>
        <el-col :span="12" class="center">
          <div class="peror-photo">
            <img src='assets/theme/img/viceoBiz/perpr.png' alt="">
          </div>
        </el-col>
      </el-row>
      <el-row class="search-result">
        <el-row :gutter="10" class="per-result">
          <el-col :offset="5" :span="3">联网核查结果：</el-col>
          <el-col :span="16">00 公民身份证号码与姓名一致，且存在照片</el-col>
        </el-row>
        <el-row :gutter="10" class="per-result">
          <el-col :offset="5" :span="3">人脸识别结果：</el-col>
          <el-col :span="16">92分 低风险</el-col>
        </el-row>
        <el-row :gutter="10" class="per-result">
          <el-col :offset="5" :span="3">认证结果：</el-col>
          <el-col :span="16">通过</el-col>
        </el-row>
      </el-row>
      <el-row class="bottom-submit">
        <el-button type="primary" @click="next2to2">确认</el-button>
      </el-row>
    </div>
    <div v-else-if="!toggleFlag">
      <el-row :gutter="20" class="page-box">
        <el-col :span="12" class="left-box">
          <el-row class="left-top">
            <el-row class="left-top-header">
              卡介质照片
            </el-row>
            <el-row class="center">
              <div class="card-media-photo">
                <img src='assets/theme/img/viceoBiz/cardMedia.png' alt="">
              </div>
            </el-row>
            <el-row class="left-top-bottom">
              账户实时状态：久悬户/不动户
            </el-row>
          </el-row>
          <el-row class="left-bottom">
            <el-row class="cus-info-box">
              <el-row class="cus-info-title">{{cusInfoData.cusInfoTitle}}</el-row>
              <el-row class="cus-info-row" v-for="(item, index) in cusInfoData.cusModel" :key="index">
                <el-col :offset="6" :span="6">{{item.cusInfoKey}}</el-col>
                <el-col :span="12">{{item.cusInfoValue}}</el-col>
              </el-row>
            </el-row>
          </el-row>
        </el-col>
        <el-col :span="12" class="right-box">
          <el-row class="view-box" v-show="flag2to2">
            <el-row class="view-header">意愿核实</el-row>
            <el-row class="view-middle">
              <el-row class="verify-item">1.请问你是否为XXX本人？回答“是”或者“否”。</el-row>
              <el-row class="verify-item">2.请确认您提供的申请资料是否真实、有效？回答“是”或者“否”。</el-row>
              <el-row class="verify-item">3.请问您是否同意在苏州农商银行办理***业务？回答“是”或者“否”。</el-row>
            </el-row>
            <el-row class="view-bottom">
              <el-button type="primary" @click="next3to1">确认</el-button>
              <el-button type="primary" @click="next2to3">结束交易</el-button>
            </el-row>
          </el-row>
          <el-row class="view-box" v-show="flag3to1">
            <el-row class="view-header">验证交易密码</el-row>
            <el-row class="view-middle">
              <el-row class="photo-box">
                <div class="pass-photo">
                  <img src='assets/theme/img/viceoBiz/passwording.png' alt="">
                </div>
                <el-row class="photo-title">客户正在验证交易密码</el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
              <el-button type="primary" @click="next3to4">客户验证密码成功</el-button>
              <el-button type="primary" @click="next3to2">客户3次输入密码错误</el-button>
            </el-row>
          </el-row>
          <el-row class="view-box" v-show="flag3to2">
            <el-row class="view-header">验证交易密码</el-row>
            <el-row class="view-middle">
              <el-row class="photo-box">
                <div class="exceed-photo">
                  <img src='assets/theme/img/viceoBiz/inputExceeded.png' alt="">
                </div>
                <el-row class="photo-title">客户密码输入超限</el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
              <el-button type="primary" @click="next3to3">结束交易</el-button>
            </el-row>
          </el-row>
          <el-row class="view-box" v-show="flag3to3">
            <el-row class="view-header">验证交易密码</el-row>
            <el-row class="view-middle">
              <el-row class="photo-box">
                <div class="exceed-photo">
                  <img src='assets/theme/img/viceoBiz/ending.png' alt="">
                </div>
                <el-row class="photo-title">交易结束</el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
            </el-row>
          </el-row>
          <el-row class="view-box" v-show="flag3to4">
            <el-row class="view-header">验证交易密码</el-row>
            <el-row class="view-middle">
              <el-row class="photo-box">
                <el-row class="photo-title">客户验证交易密码成功</el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
              <el-button type="primary" @click="next4to1">确认</el-button>
            </el-row>
          </el-row>
          <el-row class="view-box" v-show="flag4to1">
            <el-row class="view-header">客户签名</el-row>
            <el-row class="view-middle">
              <el-row class="photo-box">
                <div class="signature-photo">
                  <img src='assets/theme/img/viceoBiz/signature.png' alt="">
                </div>
                <el-row class="photo-title">客户正在签名</el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
              <el-button type="primary" @click="next4to2">客户提交签名</el-button>
            </el-row>
          </el-row>
          <el-row class="view-box" v-show="flag4to2">
            <el-row class="view-header">客户签名</el-row>
            <el-row class="view-middle">
              <el-row class="photo-box">
                <div class="signature-photo-real">
                  签名
                  <!--<img src='assets/theme/img/viceoBiz/signature.png' alt="">-->
                </div>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
              <el-button type="primary" @click="next4to3">重新签字</el-button>
              <el-button type="primary" @click="next5to1">确认</el-button>
            </el-row>
          </el-row>
          <el-row class="view-box" v-show="flag5to1">
            <el-row class="view-header">确认业务凭证</el-row>
            <el-row class="view-middle">
              <!--<div class="biz-cert-photo"></div>-->
              <BizCertForm></BizCertForm>
            </el-row>
            <el-row class="view-bottom">
              <el-button type="primary" v-show="buttonSend" @click="sendBizCertToClient">发送给客户</el-button>
              <el-button type="primary" v-show="buttonSubmit" @click="next6to1">提交</el-button>
            </el-row>
          </el-row>
          <el-row class="view-box" v-show="flag6to1">
            <el-row class="view-header">办理结果</el-row>
            <el-row class="view-middle">
              <el-row class="photo-box">
                <div class="success-photo">
                  <img src='assets/theme/img/viceoBiz/success.png' alt="">
                </div>
                <el-row class="photo-title">业务办理成功</el-row>
              </el-row>
            </el-row>
            <el-row class="view-bottom">
            </el-row>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
  import Axios from 'axios'
  import BizCertForm from '@/views/videoBiz/xiaochengxu/forOpenHouse/bizCertForm'
  export default {
    name: 'stepVideo',
    components: {
      BizCertForm
    },
    data () {
      return {
        toggleFlag: true,
        flag2to2: true,
        flag3to1: false,
        flag3to2: false,
        flag3to3: false,
        flag3to4: false,
        flag4to1: false,
        flag4to2: false,
        flag5to1: false,
        flag6to1: false,
        buttonSend: true,
        buttonSubmit: false,
        cusInfoData: {
          cusInfoTitle: '客户基本信息'
        }
      }
    },
    created () {

    },
    mounted () {
      // 交易密码失败3次
      window.eventEmitter.$on('EventCusPassFail', function () {
        this.next3to2()
      })
      // 交易密码成功
      window.eventEmitter.$on('EventCusPassSuccess', function () {
        this.next3to4()
      })
      // 客户提交签名
      window.eventEmitter.$on('EventCusSignSubmit', function () {
        this.next4to2()
      })
      // 客户确认业务凭证
      window.eventEmitter.$on('EventBizCertConfirm', function () {
        this.buttonSend = false
        this.buttonSubmit = true
      })
    },
    methods: {
      // 步骤条步进
      nextStep (index) {
        this.$emit('nextStep', index)
      },
      // 步骤2-2
      next2to2 () {
        this.toggleFlag = false
        Axios.post('/api/video').then((res) => {
          this.cusInfoData = res.data.cusInfoData
          console.log('cus-info-data is: ' + JSON.stringify(this.cusInfoData))
        }).catch((err) => {
          console.log(err)
        })
      },
      // 步骤2-3, 意愿核实失败，结束交易
      next2to3 () {
        this.flag2to2 = false
        this.flag3to3 = true
        globalUserData.sendEndTransaction()
      },
      // 步骤3-1，进入客户交易密码验证
      next3to1 () {
        this.flag2to2 = false
        this.flag3to1 = true
        this.nextStep(2)
        globalUserData.sendWillingVerifySuccess()
      },
      // 步骤3-2, 客户输入限额
      next3to2 () {
        this.flag3to1 = false
        this.flag3to2 = true
      },
      // 步骤3-3， 交易结束
      next3to3 () {
        this.flag3to2 = false
        this.flag3to3 = true
        globalUserData.sendEndTransaction()
      },
      // 步骤3-4， 客户交易密码验证成功
      next3to4 () {
        this.flag3to1 = false
        this.flag3to4 = true
      },
      // 步骤4-1， 客户正在签名
      next4to1 () {
        this.flag3to4 = false
        this.flag4to1 = true
        this.nextStep(3)
        globalUserData.sendCusSign()
      },
      // 步骤4-2， 座席确认客户签名
      next4to2 () {
        this.flag4to1 = false
        this.flag4to2 = true
      },
      // 步骤4-3， 重新签名
      next4to3 () {
        this.flag4to2 = false
        this.flag4to1 = true
        globalUserData.sendReSign()
      },
      // 步骤5-1， 客户填写业务凭证
      next5to1 () {
        this.flag4to2 = false
        this.flag5to1 = true
        this.nextStep(4)
        globalUserData.sendConfirmSign()
      },
      // 发送业务凭证
      sendBizCertToClient () {
        let bizObj = {}
        globalUserData.sendBizCert(bizObj)
      },
      // 步骤6-1，座席提交业务凭证，业务办理成功，结束
      next6to1 () {
        this.flag5to1 = false
        this.flag6to1 = true
        this.nextStep(5)
        globalUserData.sendBizSuccess()
      }
    }
  }
</script>
<style scoped>
  .step-box {
    width: 100%;
    margin: 0 auto;
  }

  /************************************* 页面一 *********************************************/

  .custom-id-title {
    text-align: center;
    margin: 15px 0;
  }

  .papers-photo {
    height: 186px;
    width: 274px;
  }

  .papers-photo img {
    height: 100%;
    width: 100%;
  }

  .center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .site-identity-title {
    margin: 20px 0 15px 0;
    text-align: center;
  }

  .peror-photo {
    height: 200px;
    width: 186px;
    overflow: hidden;
  }

  .peror-photo img {
    height: 100%;
    width: 100%;
  }

  .search-result {
    margin: 30px 0 40px 0;
  }

  .per-result {
    margin: 10px 0;
  }

  .bottom-submit {
    text-align: center;
  }

  /************************************* 页面二 *********************************************/
  .page-box {
    height: 100%;
    width: 100%;
  }

  .left-box {
    height: 750px;
  }

  .right-box {
    height: 750px;
  }

  .left-top-header {
    text-align: center;
    margin: 30px 0 20px 0;
  }

  .card-media-photo {
    width: 349px;
    height: 212px;
    overflow: hidden;
  }

  .left-top-bottom {
    text-align: center;
    margin: 30px 0 20px 0;
  }

  .cus-info-box {
    padding-top: 30px;
  }

  .cus-info-title {
    text-align: center;
    font-weight: bold;
  }

  .cus-info-row {
    padding-top: 15px;
  }

  .view-box {
    margin: 30px 0;
    border: 1px solid #d6d2d2;
    height: 675px;
  }

  .view-header {
    height: 40px;
    text-align: center;
    line-height: 40px;
    background-color: #eceeef;
  }

  .view-middle {
    height: 580px;
  }

  .view-bottom {
    text-align: center;
    height: 55px;
    line-height: 55px;
  }

  .verify-item {
    margin: 30px 30px 0 30px;
  }

  .photo-box {
    padding-top: 160px;
  }

  .photo-title {
    padding-top: 20px;
    text-align: center;
  }

  .pass-photo {
    width: 47px;
    height: 68px;
    margin: 0 auto;
  }

  .exceed-photo {
    width: 62px;
    height: 62px;
    margin: 0 auto;
  }

  .signature-photo {
    width: 50px;
    height: 48px;
    margin: 0 auto;
  }

  .signature-photo-real {
    width: 150px;
    height: 100px;
    line-height: 100px;
    border: 1px solid;
    margin: 0 auto;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
  }

  .biz-cert-photo {
    width: 150px;
    height: 400px;
    line-height: 400px;
    border: 1px solid;
    margin: 0 auto;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
  }

  .success-photo {
    width: 60px;
    height: 60px;
    margin: 0 auto;
  }
</style>
